<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; img-src * data: 'self'; style-src 'self' 'unsafe-inline'">
    <link href="../static/amaze/css/amazeui.min.css" rel="stylesheet">
    <link href="./css/styles.css" rel="stylesheet">
    <title>图片数据读取</title>
  </head>
  <style>
  .am-form-group {
    width: 190px;
  }
  #dialog-add .am-form-group {
    width: 100%;
  }
  table#member-list {
    background-color: #fff;
  }
  .v-top {
    vertical-align: top !important;
  }
  #txtLogInfo {
    background-color: black;
    color: #fff;
    width: 100%;
  }
  .am-progress {
    background-color: #aaa;
  }
  #prgImageRead, #prgFileRead, #prgDataMatch {
    display: none;
  }
  .am-pre-scrollable {
    max-height: 34rem;
  }
  </style>
  <body>
    <div class="am-container">
        <h3>工作台</h3>
        <div class="am-margin-vertical">
          <form class="am-form am-form-inline" role="form">
            <div class="am-form-group">
              <button type="button" class="am-btn v-top am-btn-primary am-btn-sm" id="btnSelectImagesDir">选择图片文件夹</button>
              <div id="dir-list"></div>
            </div>
            <div class="am-form-group v-top">
              <button id="btnSelectExcelFile" type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 选择Excel文件</button>
              <input type="hidden" id="doc-form-file" />
              <div id="file-list"></div>
            </div>
            <button type="button" class="am-btn v-top am-btn-primary am-btn-sm" id="btnSubmit">
              <i class="am-icon-spinner am-icon-spin" style="display: none;"></i>
              提交
            </button>
          </form>
        </div>
    </div>
    <div class="am-container" id="prgInfo">
      <hr data-am-widget="divider" class="am-divider am-divider-default" />
      <i>进度</i>&nbsp;&nbsp;<i class="am-icon-spinner am-icon-spin" style="display: none;"></i>
      <div class="am-progress am-progress-striped am-active">
        <div class="am-progress-bar" style="width: 0%" id="prgImageRead">图片数据读取(<span>0</span>%)</div>
        <div class="am-progress-bar am-progress-bar-success" id="prgFileRead"  style="width: 0%">Excel读取(<span>0</span>%)</div>
        <div class="am-progress-bar am-progress-bar-warning" id="prgDataMatch"  style="width: 0%">数据匹配(<span>0</span>%)</div>
      </div>
      <i>详情</i>
      <pre class="am-pre-scrollable" id="progress-info">
        ...
      </pre>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="dialog-validate-confirm">
      <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd"><span id="tip-txt"></span>
        </div>
        <div class="am-modal-footer">
          <span class="am-modal-btn done-confirm" data-am-modal-confirm>确定</span>
        </div>
      </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="dialog-doing-err">
      <div class="am-modal-dialog">
        <div class="am-modal-hd am-text-left">错误</div>
        <div class="am-modal-bd"><span class="tip-info"></span>
        </div>
        <div class="am-modal-footer">
          <span class="am-modal-btn done-confirm">确定</span>
        </div>
      </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="dialog-done-info">
      <div class="am-modal-dialog">
        <div class="am-modal-hd am-text-left">已完成</div>
        <div class="am-modal-bd am-text-left">
          <br/>
          <b>新文件路径：</b>
          <br/>
          <i></i>
          <br/>
          <br/>
          <div class="am-text-right">
            <button class="am-btn am-btn-primary am-btn-xs" id="btnOpenFile">打开文件</button>
            <button class="am-btn am-btn-primary am-btn-xs" id="btnOpenDir">打开文件所在文件夹</button>
          </div>
          <span class="tip-info"></span>
        </div>
        <div class="am-modal-footer">
          <span class="am-modal-btn done-confirm">确定</span>
        </div>
      </div>
    </div>
  </body>
  <script src="../static/jquery.min.js"></script>
  <script src="../static/amaze/js/amazeui.min.js"></script>
  <script src="./js/homeView.js"></script>
</html>
